<template>
  <el-card shadow="hover" class="section-card" v-if="submitted">
    <template #header>条形图设置</template>
    <el-form-item label="条形透明度" prop="barAlpha">
      <el-input-number v-model="form.barAlpha" :max="1" :min="0.1" :step="0.1" />
    </el-form-item>
    <el-form-item label="条形边框色" prop="barColor">
      <el-color-picker v-model="form.barColor" />
    </el-form-item>
    <el-form-item label="条形填充色" prop="barFill">
      <el-radio-group v-model="form.barFill">
        <el-radio label="npg">Nature</el-radio>
        <el-radio label="aaas">Science</el-radio>
        <el-radio label="jama">JAMA</el-radio>
        <el-radio label="lancet">Lancet</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签大小" prop="labelSize">
      <el-input-number v-model="form.labelSize" :max="5" :min="1" :step="0.1" />
    </el-form-item>
    <el-form-item label="标签颜色" prop="labelColor">
      <el-color-picker v-model="form.labelColor" />
    </el-form-item>
    <el-form-item label="标签位置" prop="labelVjust">
      <el-input-number v-model="form.labelVjust" :max="3" :min="-3" :step="0.1" />
    </el-form-item>
  </el-card>
</template>

<script lang="ts" setup>
import {computed} from "vue";

defineOptions({nam: "BasicBinCard"})

const props = defineProps<{
  modelValue: {
    barAlpha: number
    barColor: string
    barFill: number
    labelColor: string
    labelSize: number
    labelVjust: number
  }
  submitted: boolean
}>()

const emit = defineEmits<{
  (
    e: 'update:modelValue',
    payload: {
      barAlpha: number
      barColor: string
      barFill: number
      labelColor: string
      labelSize: number
      labelVjust: number
    }
  ): void
}>()


// 内部计算属性，读写都会触发 update:modelValue
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', { ...val })
  }
})



</script>

<style scoped>
.section-card {
  margin-bottom: 16px;
}
</style>
